import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core'
import { _HttpClient } from '@delon/theme'

import { PageService } from '@shared/services/page.service'
import { AcquirerCard, IUpdateAcquirerCardFeature } from '@shared/interfaces/acquirer'
import { CommonAcquirerService } from '@shared/services/acquirer.service'
import { DetailTabClass } from '@shared/classes/DetailTabClass'
import { ETabScrollStatus } from '@shared/enums'
import { ActivatedRoute } from '@angular/router'
import { AcquirerService } from '../../acquirer.service'
import { NzMessageService } from 'ng-zorro-antd'
import { I18NService } from '@core'

@Component({
  selector: 'app-acquirer-detail-tab-func-card',
  templateUrl: './tab-func-card.component.html',
})
export class AcquirerDetailTabFuncCardComponent extends DetailTabClass<AcquirerCard> implements OnInit {
  @ViewChild('operator') operator: TemplateRef<any>
  @ViewChild('tpRefund') tpRefund: TemplateRef<any>
  @ViewChild('tpTranTypes') tpTranTypes: TemplateRef<any>

  fields = {
    Card: '1',
  }
  params: IUpdateAcquirerCardFeature = {
    version: 0,
    feature: null,
  }

  transactionTypes = [
    { label: '消费', value: 'string', checked: false },
    { label: '预授权', value: 'AC01', checked: false },
    { label: '退款', value: 'AE01', checked: false },
    { label: '撤销', value: 'EP01', checked: false },
    { label: '余额查询', value: 'DP01', checked: false },
  ]

  constructor(
    public pageService: PageService,
    public route: ActivatedRoute,
    private messageService: NzMessageService,
    private commonAcquirerService: CommonAcquirerService,
    private acquirerService: AcquirerService,
    private i18n: I18NService,
  ) {
    super(pageService, route)
  }

  ngOnInit() {
    this.initialData()
  }

  initialData() {
    this.commonAcquirerService.viewAcquirer$.value$.subscribe(acquirer => {
      // 更新了 reset commonAcquirerService. 用this.data 来自checking 避免掉数据从load
      this.initialColumns()

      this.data = acquirer.institution.card
      this.params.version = acquirer.institution.version

      this.setEdit(this.fields.Card, 1)
      this.setupCardColumn(this.data)
      this.setupIdForColumn(this.fields)
    })

    this.pageService.setTabScrollStatus(ETabScrollStatus.Scroll)
  }

  setupCardColumn(card: AcquirerCard) {
    // this.transactionTypes.map(tran => {
    //   tran.checked = card.tradeTypes.includes(tran.value)
    // })
    this.columns[this.fields.Card].push([
      {
        span: 24,
        label: 'BIZ.STORE.OTHER.TRADE.REFUND_MODE',
        labelI18n: 'BIZ.STORE.OTHER.TRADE.REFUND_MODE',
        displayValue: card.isRefundAsync
          ? this.trans('BIZ.STORE.OTHER.TRADE.REFUND_MODE.ASYNC')
          : this.trans('BIZ.STORE.OTHER.TRADE.REFUND_MODE.SYNC'),
        index: 'isRefundAsync',
        value: card.isRefundAsync !== undefined && card.isRefundAsync,
        template: this.tpRefund,
      },
      // {
      //   span: 10,
      //   label: '交易类型',
      //   value: this.renderTranTypes(),
      //   template: this.tpTranTypes,
      // },
      {
        span: 4,
        operate: true,
        label: 'GENERAL.INFO.OPERATION',
        labelI18n: 'GENERAL.INFO.OPERATION',
        template: this.operator,
      },
    ])
  }

  renderTranTypes(): string {
    return this.transactionTypes
      .filter(tradeType => this.data.tradeTypes.includes(tradeType.value))
      .map(tradeType => tradeType.label)
      .join(',')
  }

  // abstract methods
  onCancel() {
    this.columns[this.field][this.rowIndex].forEach(column => {
      if (!column.index) return
      column.value = this.data[column.index]
    })
  }

  onSubmit() {
    try {
      this.columns[this.field][this.rowIndex].forEach(column => {
        if (!column.index) return
        column.displayValue = column.value
          ? this.trans('BIZ.STORE.OTHER.TRADE.REFUND_MODE.ASYNC')
          : this.trans('BIZ.STORE.OTHER.TRADE.REFUND_MODE.SYNC')
        this.data[column.index] = column.value
      })
      this.data['tradeTypes'] = [] // -- 二期
      this.params.feature = this.data

      this.acquirerService.updateCardFeaturesOfAcquirer(this.params, this.getID()).subscribe(acquirer => {
        this.commonAcquirerService.setViewingAcquirer(acquirer)
      })
      this.messageService.success(this.trans('GENERAL.NOTIFICATION.UPDATE_SUCCESS'))
    } catch (error) {
      this.messageService.error(this.trans('GENERAL.NOTIFICATION.UPDATE_FAIL'))
    }
  }

  initialColumns() {
    /*
     * 这个columns是用来收集所有需要display在这个tab里面的数据.
     * 比如 "交易币种转换" = '1', 然后交易币种转换里有一个Array = [商户交易币种, 转换交易币种, 转换汇率, 等等] 然后他在columns里就是
     * {'1': [[{商户交易币种, 转换交易币种, 转换汇率, 等等}]]}
     */
    // 现在这个trades component需要展示2个field. 这里创建2个空的Array在this.columns里的field
    for (const key in this.fields) {
      this.columns[this.fields[key]] = []
    }
  }

  trans(key: string, params?: Object): string {
    return this.i18n.fanyi(key, params)
  }
}
